<template>
	<view class="container">
		<!-- 提现金额 -->
		<view class="section">
			<div class="section-box">
				<view class="section-title">提现金额（开票金额）</view>
				<view class="section-title2">{{listData.withdrawalPrice || 0}}元</view>
			</div>
			<div class="line"></div>
			<view class="section-tip" @click="toggle('bottom')">
				请以下方开票信息提供准确的在有效期内发票，开票类目为：信息技术服务-服务费、广告费、推广费。
			</view>
			<view class="section-body">
				<div class="section-body-box">
					<view class="section-body-text">公司名称：{{listData.invoiceCompanyName || ''}} </view>
					<view class="section-body-text">纳税号码：{{listData.invoiceCompanyNumber || ''}}</view>
				</div>
				<div class="section-btn" @click="copyText()">
					复制
				</div>
			</view>
			<view class="section-footer" @click="viewInvoiceExample">
				查看发票示例
			</view>
		</view>
		<!-- 上传发票 -->
		<view class="section-2">
			<div class="section-body-btn">
				<div class="section-icon"><img src="/static/mine/Frame1.png" alt="" /></div>
				<div class="title-text">
					<!-- <uni-file-picker @fail="fail" @select="fileOnLoad" v-model="value" file-mediatype="all" return-type="object" mode="list" :auto-upload="false"> -->
						
					<!-- </uni-file-picker> -->
					<u-upload
					  @afterRead="fileOnLoad"
					  accept="all"
					>
					<view class="title-top">上传发票</view>
					</u-upload>
					
					<view class="title-bottom">建议上传JPG、PNG、PDF格式</view>
				</div>

			</div>
			<div class="icon-right">
				<div><uni-icons type="right" size="24" style="color:#B0B0B0"></uni-icons></div>
			</div>
		</view>
		<!-- 发票信息 -->
		<view class="section-2" v-for="item in fileData" :key="item.invoiceFileUrl">
			<div class="section-body-btn" :key="item">
				<div class="section-icon">
					<img src="/static/mine/Frame.png" alt="" />
				</div>
				<div class="title-text">
					<view class="title-top">发票</view>
					<view class="title-bottom">{{ item.name || '' }}</view>
				</div>
			</div>
			<div class="icon-right">
				<div>
					<uni-icons type="close" size="24" style="color:#B0B0B0" @click="delAction(item.invoiceFileUrl)"></uni-icons>
				</div>
			</div>
		</view>
		<view class="fixed-bottom">
			<button class="withdraw-btn" @click="submitInvoice">确认提交</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [],
				sectionData: [{
					icon: '/static/mine/Frame.png',
					titleTop: '发票额度：20元',
					titleBottom: '其他描述信息',
					action: 'otherAction'
				}],
				ossData: {},
				listData: {
					invoiceCompanyName: '',
					invoiceCompanyNumber: '',
					withdrawalPrice: 0
				},
				fileData: [],
			};
		},
		onLoad(option) {
			this.withdrawalId = option.withdrawalId
			this.$get('/common/external/aliyun/getToken').then(res=>{
			  this.ossData = res.content
			})
			uni.showLoading({
				title: '加载中'
			})
			this.$post(`/yahe/account/getInvoice/${this.withdrawalId}`, {}, '1').then(res=>{
				if (res.success) {
					this.listData = res.content
				} else {
					this.$toast(res.message, 'none')
				}
			})
			
			
		},
		methods: {
			async fileOnLoad(event) {
				const type = event.file?.url?.split('.')?.[event.file?.url?.split('.')?.length - 1];
				const result = await this.uploadFilePromise(event?.file?.url, type);
				this.fileData.push({
					invoiceFileUrl: result,
					name: event.file?.name,
				});
			},
			// 复制文本
			copyText() {
				const text = `公司名称：${this.listData.invoiceCompanyName}\n纳税号码:${this.listData.invoiceCompanyNumber}\n提现金额:${this.listData.withdrawalPrice}`
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			// 查看发票示例
			viewInvoiceExample() {
				uni.showToast({
					title: '查看发票示例',
					icon: 'none'
				});
			},
			// 提交发票
			submitInvoice() {
				if (this.fileData?.length == 0) {
					this.$toast('请上传发票！')
					return
				}
				const list = [];
				this.fileData?.forEach((item) => {
					list.push({
						withdrawalId: this.withdrawalId,
						invoiceFileUrl: item.invoiceFileUrl
					})
				})
				this.$post('/yahe/account/addInvoice', list, '1').then((res) => {
					if (res.success) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						uni.navigateTo({
							url: `/mineComponentPackage/component/schedule/index?withdrawalId=${res.content?.withdrawalId}`
						})
					} else {
						this.$toast(res.messsage, 'none')
					}
				})
				
			},
			// 删除发票信息
			delAction(url) {
				const list = [];
				this.fileData.forEach((item) => {
					if (item.invoiceFileUrl !== url) {
						list.push(item)
					}
				})
				this.fileData = list
			},
			async uploadFilePromise(filePath, type) {  ///  多张图片上传
			  let channel = 'activity-weixin-h5'
			  /*#ifdef MP-WEIXIN*/
			  channel = 'activity-weixin-mini'
			  /*#endif*/
			  // #ifdef MP-TOUTIAO
			  channel = 'event-douyin-mini'
			  // #endif
			  return new Promise((resolve, reject) => {
			    const relaUrl = this.ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.' + type
			    uni.uploadFile({
			      url: this.ossData.host, //仅为示例，非真实的接口地址
			      filePath: filePath,
			      name: 'file',
			      formData: {
			        key: relaUrl,
			        OSSAccessKeyId: this.ossData.accessid,
			        policy: this.ossData.policy,
			        Signature: this.ossData.signature,
			      },
			      header: {
			        sassAppId:this.$sassAppId,
			        token: uni.getStorageSync('token'),
			        channel,
			      },
			      success: (uploadFileRes) => {
					  resolve(this.ossData.host + '/' + relaUrl);
			      },
			      fail: (res) => {
			        reject(err);
			      }
			    })
			  });
			},
		},
	};
</script>
<style scoped lang="less">
	.container {
		padding: 30rpx;
		background-color: #F5F5F5;
		height: 100%;
	}

	.section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.section-box {
		display: flex;
		justify-content: space-between;
		align-items: end;

	}

	.section-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #3A3A3A;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.section-title2 {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #3A3A3A;
		line-height: 47rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.section-title-wx {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #3A3A3A;
		line-height: 30rpx;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.section-content {
		display: flex;
		flex-direction: column;
		justify-content: end;
		align-items: flex-end;
		font-size: 28rpx;
		color: #666;
	}

	.section-text {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #3A3A3A;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.line {
		border-bottom: 1rpx solid #EFEFEF;
		margin: 36rpx 0rpx;
	}

	.line2 {
		border-bottom: 2rpx solid #EFEFEF;
		margin: 0rpx 0rpx 36rpx 0rpx
	}

	.section-tip {
		display: flex;
		justify-content: space-between;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #B0B0B0;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.currency-symbol {
		position: absolute;
		left: 20rpx;
		font-size: 32rpx;
		color: #333;
		z-index: 1;
	}

	.input-container {
		position: relative;
		display: flex;
		align-items: center;
	}

	.currency-symbol {
		position: absolute;
		left: 0rpx;
		top: 20rpx;
		font-size: 56rpx;
		font-weight: 600;
		color: #333;
		z-index: 1;
	}

	.input {
		box-sizing: border-box;
		height: 80rpx;
		border-radius: 8rpx;
		padding: 0 20rpx 0 60rpx;
		margin-bottom: 20rpx;
		border: 0rpx;
		font-size: 56rpx;
		font-weight: 600;
		color: #3A3A3A !important;
	}

	.tip {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #B0B0B0;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.link {
		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #10BEAF;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.withdraw-btn {
		background: linear-gradient(90deg, #29D8C6 0%, #10BEAF 100%);
		border-radius: 88rpx 88rpx 88rpx 88rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 40rpx;
	}

	::v-deep .uni-input-placeholder {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 40rpx;
		color: #B0B0B0;
		font-style: normal;
		text-transform: none;
	}

	::v-deep.uni-popup .uni-popup__wrapper {
		/* width: 560rpx; */
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: rgb(255, 255, 255);
	}

	.box {
		display: flex;
		flex-direction: column;
		margin: 40rpx 48rpx 0rpx;
		justify-content: center;
		align-items: center;
	}

	.text {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #3A3A3A;
		line-height: 42rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.body {
		margin: 24rpx 0px 40rpx 0px;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #6D6D6D;
		line-height: 40rpx;
		font-style: normal;
		text-transform: none;
		;
	}

	.line3 {
		border-bottom: 1px solid #D1D1D1;
		opacity: 0.5;
		width: 120%;
	}

	.line4 {
		border-bottom: 1px solid #D1D1D1;
		opacity: 0.5;
		width: 100%;
		margin-bottom: 50rpx;
	}

	.footer {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #0A978E;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin: 24rpx 0rpx;
	}


	/* 弹出框内容样式 */

	.popup-content {
		width: 560rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
	}

	.popup-content2 {
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		padding: 40rpx;
		margin-bottom: 386rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #3A3A3A;
		line-height: 35rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	/* 选项列表样式 */
	.options {
		margin-bottom: 40rpx;
	}

	.option-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.option-item:last-child {
		border-bottom: none;
	}

	.option-title {
		font-size: 32rpx;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.option-description {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	/* 下一步按钮样式 */
	.next-button {
		height: 60rpx;
		background: linear-gradient(90deg, #29D8C6 0%, #10BEAF 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		/* line-height: 28rpx; */
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	::v-deep .uni-radio-input-checked {
		border-color: rgba(41, 216, 198, 1) !important;
		background: linear-gradient(90deg, #29D8C6 0%, #10BEAF 100%);
	}

	.popup-header2 {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-bottom: 28rpx;
	}

	.popup-title2 {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3A3A3A;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.popup-title3 {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #B0B0B0;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 4rpx;
	}

	.popup-header-title {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}

	::v-deep .is-input-border {
		border: 0rpx solid;
	}

	::v-deep .uni-easyinput__content-input {
		padding-right: 30rpx;
		text-align: right;
	}

	::v-deep .uni-input-placeholder {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #B0B0B0;
		line-height: 33rpx;
		font-style: normal;
		text-transform: none;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}

	::v-deep .uni-input-input {
		font-size: 36rpx;
		font-weight: 600;
	}

	.section-body {
		display: flex;
		align-items: center;
		background: rgba(0, 0, 0, 0.03);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 20rpx 0rpx;
	}

	.section-body-box {
		flex: 4;
		padding: 24rpx 0rpx 24rpx 22rpx;
	}

	.section-body-text {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #6D6D6D;
		line-height: 35rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.section-btn {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #0A978E;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.section-footer {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #0A978E;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.section-2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.section-icon {
		box-sizing: border-box;
		display: inline-block;
		img {
			width: 48rpx;
			height: 50rpx;
		}
	}

	.section-body-btn {
		display: flex;
		align-items: center;
	}

	.title-text {
		margin-left: 20rpx;
	}

	.title-top {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #3A3A3A;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.title-bottom {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #B0B0B0;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 20rpx;
	}

	.withdraw-btn {
		background: linear-gradient(90deg, #29D8C6 0%, #10BEAF 100%);
		border-radius: 88rpx 88rpx 88rpx 88rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		padding: 20rpx 40rpx;
	}
</style>